<template>
  <div id="print">
    <div
      style="height:100%;page-break-after:always;widht:100%;padding-top:3vw"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <el-row :gutter="24">
        <div
          style="font-size: 2.2vw;font-weight: bold;text-align: center;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);margin-bottom: 1.8vw;"
        >{{ item.title }}&nbsp</div>
      </el-row>
      <el-row :gutter="24">
        <div style="border-top: 1px solid #000;" />
      </el-row>
      <el-row :gutter="24" style="margin-bottom:20px;line-height: 1.5;widht:100%;padding:0 25px">
        <el-row :gutter="24" style="line-height: 2;">
          <el-col
            :span="5"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>采血卡号：</div>
            <div>{{ item.bloodNum ?item.bloodNum:'' }}&nbsp</div>
          </el-col>
          <el-col
            :span="7"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div style="width:30%">出生医院：</div>
            <div
              style="width:60%;word-break: break-all;display: inline-block;text-align: left;"
            >{{item.hospitalName? item.hospitalName :''}}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>条形码号：</div>
            <div>{{item.barCode? item.barCode :''}}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>筛查编号：</div>
            <div>{{ item.expNum ? item.expNum:''}}&nbsp</div>
          </el-col>
        </el-row>

        <el-row :gutter="24" style="line-height: 2;">
          <el-col
            :span="5"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>母亲姓名：</div>
            <div>{{ item.monName ? item.monName :'' }}&nbsp</div>
          </el-col>
          <el-col
            :span="7"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div style="width:30%">性别：</div>
            <div>{{ item.babySex ? item.babySex :''}}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>出生日期：</div>
            <div>{{item.birthTime ? item.birthTime.substr(0, 10) : ''}}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>采血日期：</div>
            <div>{{item.bloodTime ? item.bloodTime.substr(0, 10) :''}}&nbsp</div>
          </el-col>
        </el-row>

        <el-row :gutter="24" style="line-height: 2;">
          <el-col
            :span="12"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>家庭地址：</div>
            <div>{{item.address ? item.address : ''}}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>手机电话：</div>
            <div>{{ item.phone ? item.phone : '' }}&nbsp</div>
          </el-col>
          <el-col
            :span="6"
            style="padding: 0 !important;font-size: 0.8vw;text-align: right;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);display:flex;"
          >
            <div>检测日期：</div>
            <div>{{ item.experimentDate ? item.experimentDate.substr(0, 10) :''}}&nbsp</div>
          </el-col>
        </el-row>
      </el-row>
      <!-- 表格 -->
      <el-row style="line-height: 1.8;border:1px solid;margin-top:0.8vw">
        <el-col
          :span="5"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
        >筛查项目</el-col>
        <el-col
          :span="3"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
        >检测指标</el-col>
        <el-col
          :span="3"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
        >检测值</el-col>
        <el-col
          :span="5"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
        >正常参考值</el-col>
        <el-col
          :span="8"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;"
        >筛查结果</el-col>
      </el-row>
      <!-- 表格内容 -->
      <el-row
        style="line-height: 1.8;border-bottom:1px solid;border-left:1px solid;border-right:1px solid;"
      >
        <div v-for="(listItem, keys, listIndex) in item.experimentValue" :key="listIndex">
          <el-col
            :span="5"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
          >{{ listItem.indicatorCodeName ? listItem.indicatorCodeName : '' }}&nbsp</el-col>
          <el-col
            :span="3"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
          >{{ listItem.indicatorCode ? listItem.indicatorCode : ''}}&nbsp</el-col>
          <el-col
            :span="3"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
          >{{ listItem.experimentValue ? listItem.experimentValue : '' }}{{ listItem.units ? listItem.units : '' }}&nbsp</el-col>
          <el-col
            :span="5"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
          >{{ listItem.referenceValue ? listItem.referenceValue : '' }}&nbsp</el-col>
          <el-col
            :span="8"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
          >{{ listItem.hint ? listItem.hint : '' }}&nbsp</el-col>
          <!-- <el-col
            :span="4"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
            >1.80</el-col
          >
          <el-col
            :span="4"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
            >0-7.5</el-col
          >
          <el-col
            :span="4"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-right:1px solid"
            >正常</el-col
          >
          <el-col
            :span="4"
            style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;"
            >2017-12-20</el-col
          >-->
        </div>
        <el-col
          :span="24"
          style="display:flex;justify-content: center;color:#000000f2;font-size: 0.8vw;border-top:1px solid;"
        >本次检测结果只对该筛查编号标本负责</el-col>
      </el-row>
      <el-row :gutter="24" style="padding-left:20px;margin-top:20px">
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >检测者(签)：{{item.experimentMan ? item.experimentMan : ''}}</el-col>
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >审核者(签)：{{item.checkMan ? item.checkMan : ''}}</el-col>
        <!-- <img src="http://jk.xsesc.com/Acme/webs/doctorpic/hhxg.png" /> -->
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >报告者：{{item.reportMan ? item.reportMan : ''}}</el-col>
      </el-row>
      <el-row :gutter="24" style="padding-left:20px;margin-top:20px">
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >检测日期：{{item.experimentDate ? item.experimentDate.substr(0, 10) : ''}}&nbsp</el-col>
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >审核日期：{{item.checkDate ? item.checkDate.substr(0, 10) : ''}}&nbsp</el-col>
        <!-- <img src="http://jk.xsesc.com/Acme/webs/doctorpic/hhxg.png" /> -->
        <el-col
          :span="8"
          style="padding: 0 !important;font-size: 0.8vw;text-align: left;overflow-wrap: break-word;color: rgba(0, 0, 0, 0.95);"
        >报告日期：{{item.reportDate ? item.reportDate.substr(0, 10) : ''}}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {},
  methods: {}
};
</script>
